<template>
  <test-ee title="生成主题颜色">
    <div v-for="color in  colors " :key="color.name" class="color" :style="{ backgroundColor: `var(--${color.name}0)` }">
      <p>{{ color.name }}</p>
      <p>{{ color.rgb }}</p>
      <ul>
        <li v-for=" item  in  Array.from({ length: 9 }, (_, index) => index + 1) " :key="item"
            :style="{ backgroundColor: `var(--${color.name}${item})` }">
        </li>
      </ul>
    </div>
  </test-ee>

  <test-ee title="弹窗主题颜色" class="use">
    <ee-alert stay modelValue="true" v-for="color in  colors" :key="color.name" :class="'plain ' + color.name"
              :title="color.name">
      <template #icon>
        <div :class="'icon ' + color.name">
          !
        </div>
      </template>
      弹窗文字
    </ee-alert>
  </test-ee>

  <test-ee title="按钮主题颜色">
    <ee-button v-for="color in  colors" :key="color.name" :type="color.name">
      按钮主题颜色
    </ee-button>

    <ee-button class="button">按钮主题颜色</ee-button>

    <div style="width: 100%; margin: .5em 0"></div>

    <ee-button v-for="color in  colors" :key="color.name" plain :type="color.name">
      按钮主题颜色
    </ee-button>

    <ee-button class="button plain">按钮主题颜色</ee-button>

    <div style="width: 100%; margin: .5em 0"></div>

    <span v-for="color in  colors" :key="color.name" :class="color.name + ' text'">
      按钮主题颜色
    </span>
  </test-ee>
</template>

<script type="text/javascript">
import { color } from '../ee-ui/basic/ee-color'

export default {
  name: "test-ee-theme",
  data() {
    return {
      colors: [
        { rgb: { r: 63, g: 148, b: 233 }, name: 'primary' },
        { rgb: { r: 51, g: 232, b: 62 }, name: 'success' },
        { rgb: { r: 234, g: 154, b: 63 }, name: 'warning' },
        { rgb: { r: 233, g: 91, b: 63 }, name: 'danger' },
        { rgb: { r: 47, g: 48, b: 49 }, name: 'info' },
        { rgb: { r: 206, g: 207, b: 208 }, name: 'border' },
      ],
    }
  },
  props: {
  },
  computed: {
  },
  methods: {
  },
  mounted() {
    for (const item of this.colors)
      color(item.rgb, item.name);
  },
}
</script>

<style lang="scss" scoped>
.color {
  width: 360px;
  border-radius: .5em;
  color: #fff;
  overflow: hidden;
  margin: 1em;

  p {
    margin: 1em;
  }

  ul {
    display: flex;

    li {
      flex: 1;
      height: 40px;
    }
  }
}

.use {
  button {
    padding: 1em;
  }
}
</style>